<!--可爱粉色连帽衫动漫女孩4K壁纸3840x2160_彼岸图网.jpg-->
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta content="width=device-width, initial-scale=1.0" name="viewport">
    <title>学生教师管理系统</title>
    <!-- Tailwind CSS -->
    <script src="https://cdn.tailwindcss.com"></script>
    <!-- Font Awesome -->
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">

    <!-- 自定义配置 -->

    <style>


        body {
            background-image: url('../可爱粉色连帽衫动漫女孩4K壁纸3840x2160_彼岸图网.jpg');
            background-size: cover;
            background-position: center;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            margin: 0;
        }

        .login-container {
            background-color: rgba(255, 255, 255, 0.5); /* 设置背景透明度 */
            border-radius: 10px;
            box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
            animation: fadeIn 0.5s ease-in-out;
            z-index: 1; /* 设置层叠顺序 */
            padding: 2rem;
        }

        @keyframes fadeIn {
            from {
                opacity: 0;
                transform: translateY(-20px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
    </style>
</head>
<body>
<div class="login-container">
    <h2 class="text-2xl font-bold mb-4 text-center text-primary">学生教师管理系统登录</h2>
    <!-- 登录表单 -->
    <form id="loginForm">
        <div class="mb-4">
            <label class="block text-sm font-medium text-gray-700 mb-1" for="uid">账号</label>
            <input class="block w-full rounded-md border-gray-300 shadow-sm focus:border-primary focus:ring focus:ring-primary/30 transition duration-200" id="uid"
                   required
                   type="text">
        </div>
        <div class="mb-6">
            <label class="block text-sm font-medium text-gray-700 mb-1" for="upass">密码</label>
            <input class="block w-full rounded-md border-gray-300 shadow-sm focus:border-primary focus:ring focus:ring-primary/30 transition duration-200" id="upass"
                   required
                   type="password">
        </div>
        <div class="flex justify-center space-x-4">
            <button class="px-6 py-2 bg-primary text-white rounded-md hover:bg-primary/90 transition-colors"
                    type="submit">登录
            </button>
            <button class="px-6 py-2 bg-secondary text-white rounded-md hover:bg-secondary/90 transition-colors" id="registerBtn"
                    type="button">注册
            </button>
        </div>
    </form>
    <!-- 注册表单，初始隐藏 -->
    <form class="hidden" id="registerForm">
        <div class="mb-4">
            <label class="block text-sm font-medium text-gray-700 mb-1" for="newUid">新账号</label>
            <input class="block w-full rounded-md border-gray-300 shadow-sm focus:border-primary focus:ring focus:ring-primary/30 transition duration-200" id="newUid"
                   required
                   type="text">
        </div>
        <div class="mb-4">
            <label class="block text-sm font-medium text-gray-700 mb-1" for="newUpass">新密码</label>
            <input class="block w-full rounded-md border-gray-300 shadow-sm focus:border-primary focus:ring focus:ring-primary/30 transition duration-200" id="newUpass"
                   required
                   type="password">
        </div>
        <div class="mb-4">
            <label class="block text-sm font-medium text-gray-700 mb-1" for="adminUid">管理员账号</label>
            <input class="block w-full rounded-md border-gray-300 shadow-sm focus:border-primary focus:ring focus:ring-primary/30 transition duration-200" id="adminUid"
                   required
                   type="text">
        </div>
        <div class="mb-6">
            <label class="block text-sm font-medium text-gray-700 mb-1" for="adminUpass">管理员密码</label>
            <input class="block w-full rounded-md border-gray-300 shadow-sm focus:border-primary focus:ring focus:ring-primary/30 transition duration-200" id="adminUpass"
                   required
                   type="password">
        </div>
        <div class="flex justify-center space-x-4">
            <button class="px-6 py-2 bg-primary text-white rounded-md hover:bg-primary/90 transition-colors"
                    type="submit">提交注册
            </button>
            <button class="px-6 py-2 bg-gray-200 text-gray-800 rounded-md hover:bg-gray-300 transition-colors" id="cancelRegisterBtn"
                    type="button">取消
            </button>
        </div>
    </form>
</div>

<!-- 引入共用JS -->
<script src="../js/login.js"></script>
<script src="../js/style.js"></script>
</body>
</html>